import React, { Component } from 'react';
import { Form, Button, Input, Row, Col, Modal, Drawer, DatePicker, message } from 'antd';
import DataTable from './components/index'
import QueryLog from './components/QueryLog'
import { connect } from 'react-redux';
import styles from './Operationlog.less'
import * as actions from './store/action'

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableStatus: 'default', //default-默认，query-查询
            modalVisible: false,
            queryAdress: {}, //更具地址的查询条件
            pageIndex: 1,
            pageSize: 50,
            information: ''

        }
    }
    componentDidMount() {
        this.props.getAllLog({ pageIndex: 0, pageSize: 50 });
      }
    render() {
        const { allLog, totalCount } = this.props;
        const { pageIndex, pageSize } = this.state
        return (
            <Row className={styles.All}>
                <Col span={20}>
                    <QueryLog
                        handleQueryByAdress={(values) => {
                            this.setState({
                                tableStatus: 'query',
                                queryAdress: values,
                                pageIndex: 1,
                                pageSize: 10,
                            })
                            this.props.tosendLogByTimeRequest(values)
                        }}
                        handleResetQuery={() => {
                            this.setState({
                                tableStatus: 'default',
                                queryAdress: {},
                                pageIndex: 1,
                                pageSize: 10,
                            })
                            this.props.getAllLog({ pageIndex: 0, pageSize: 50 })
                        }}
                        onSearchAfter={(value) => {
                            this.onSearchAfter(value)
                        }}
                    />
                </Col>
                <Col span={24} style={{ marginTop: "10px" }}>
                    <DataTable
                        allLog={allLog}
                        // pageSize={pageSize}
                        // pageIndex={pageIndex}
                        totalCount={totalCount}
                        handlePageChange={this.handlePageChange} />
                </Col>
            </Row>
        );
    }
    handlePageChange = (pageIndex, pageSize) => {
        // this.setState({
        //     pageIndex,
        //     pageSize
        // })
        if (this.state.tableStatus === "default") {
            this.props.getAllLog({ pageIndex: pageIndex - 1, pageSize:50 })
        } else {
            let obj = this.state.queryAdress;
            obj.pageIndex = pageIndex - 1
            obj.pageSize = pageSize
            this.props.tosendLogByTimeRequest(obj)
        }
    }

    // 根据ID查找详信息
    detailedDatas = (id) => {
        this.props.getAllLog(id)
    }
}
const mapStateToProps = (state) => ({
    //获取所有操作日志
    allLog: state.getAllLog.allLog,
    totalCount: state.getAllLog.totalCount

})
const mapDispatchToProps = (dispatch) => ({
    //派发获取所有操作日志 
    getAllLog(page) {
        dispatch(actions.getAllLog(page))
    },
    //根据id查看日志详情
    tosendgetRequestRequest(id) {
        dispatch(actions.getLogByIdRequest(id))
    },
    //根据开始时间和结束时间查询数据
    tosendLogByTimeRequest(information) {
        dispatch(actions.getLogByTimeRequest(information))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Index);
